<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>datetime</title>

    <!-- jQuery Include -->
    <script src="//cdn.bootcss.com/jquery/2.1.3/jquery.js"></script>
    
    
    <!-- Mobiscroll JS and CSS Includes -->
    <link href="css/mobiscroll.custom-2.17.0.min.css" rel="stylesheet" type="text/css" />
    <script src="js/mobiscroll.custom-2.17.0.min.js" type="text/javascript"></script>

    <style type="text/css">
        /* Demo Page styling, you can ignore this in your implementation */
        body { padding: 0; margin: 0; font-size: 16px; font-family: arial, verdana, sans-serif; }
        input, select { width: 100%; padding: .625em; margin: 0 0 .625em 0; border: 1px solid #aaa; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
        .header { padding: .625em; background: #5185a8;}
        .header h1 { margin: 0; padding: 0; color: #fff; text-align: center; font-size: 1.25em; font-weight: bold; text-shadow: 1px 1px 1px #000; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
        .content { padding: 1em; }

        /* Listview demo styling */
        .mbsc-lv-cont { margin: 1em -1em; }
        .item{
            border-bottom:3px solid #ccc;
        }
    </style>


</head>

<body>
    <div class="item">
        <h3>日历</h3>
        <input type="text" id="calendar" placeholder="普通日历">
    </div>
    <div class="item">
        <h3>日历</h3>
        <input type="text" id="calendar2" placeholder="普通日历">
    </div>



    <script>
        $(function () {
            var now = new Date();

            $('#calendar').mobiscroll().datetime({
                theme: 'mobiscroll',
                lang: 'zh',
                display: 'bottom',
                min: new Date(now.getFullYear(), now.getMonth(), now.getDate()),
                invalid: ['w0', 'w6', '5/1', '12/24', '12/25'],
                dateOrder: 'yyMdd',
                timeWheels: 'HHii'
            });
        })
    </script>
</body>
</html>
